<template>
  <common-page title="数据分布">
    <div slot="header">
      <el-button @click="goBack">返回</el-button>
    </div>

    <common-list-tabs slot="tabs">
      <common-tabs slot="tabs" v-model="page" @tab-click="tabChange">
        <el-tab-pane
          label="按表"
          name="common-table"
          v-if="tabPermission.tabTable"
        ></el-tab-pane>
        <el-tab-pane
          label="按列"
          name="common-column"
          v-if="tabPermission.tabColumn"
        ></el-tab-pane>
      </common-tabs>
    </common-list-tabs>
    <component
      slot="content"
      :is="page"
      :key="page"
      @change="change"
      :params="params"
      :dataId="dataId"
    ></component
  ></common-page>
</template>

<script>
import CommonTable from "./table";
import CommonColumn from "./column";
import { getHasPermission } from "@/utils/util";
import { mapGetters } from "vuex";

export default {
  name: "dataDistribution",
  props: {
    dataId: {
      type: Number,
    },
  },
  data() {
    return {
      page: "",
      params: {},
      tabPermission: {
        tabTable: false,
        tabColumn: false,
      },
    };
  },
  computed: {
    ...mapGetters(["systemInfo"]),
  },
  components: {
    CommonTable,
    CommonColumn,
  },
  mounted() {
    this.tabPermission.tabTable = this.systemInfo.isThird
      ? true
      : getHasPermission(["datascan:table:list"]);
    this.tabPermission.tabColumn = this.systemInfo.isThird
      ? true
      : getHasPermission(["datascan:column:list"]);

    if (this.tabPermission.tabTable) {
      this.page = "common-table";
    } else if (this.tabPermission.tabColumn) {
      this.page = "common-column";
    }
  },
  methods: {
    change(to, params) {
      this.params = params;
      this.page = `common-${to}`;
    },
    tabChange() {
      this.params = this.dataId;
    },
    goBack() {
      //返回
      this.$emit("close");
    },
  },
};
</script>
